<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ECharts 3D Pyramid Chart</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
</head>

<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>
  <script>
    var chart = echarts.init(document.getElementById('chart'));

    chart.setOption({
      tooltip: {},
      visualMap: {
        max: 100,
        inRange: {
          color: ['#e0ffff', '#006edd']
        }
      },
      xAxis3D: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis3D: {
        type: 'category',
        data: ['1', '2', '3', '4', '5']
      },
      zAxis3D: {
        type: 'value'
      },
      grid3D: {
        boxWidth: 200,
        boxDepth: 80,
        viewControl: {
          // projection: 'orthographic'
        },
        light: {
          main: {
            intensity: 1.2,
            shadow: true
          },
          ambient: {
            intensity: 0.3
          }
        }
      },
      series: [{
        type: 'bar3D',
        data: [
          [0, 0, 0, 60],
          [0, 1, 0, 80],
          [0, 2, 0, 90],
          [0, 3, 0, 70],
          [0, 4, 0, 50],
          [1, 0, 0, 40],
          [1, 1, 0, 60],
          [1, 2, 0, 70],
          [1, 3, 0, 80],
          [1, 4, 0, 90],
          [2, 0, 0, 50],
          [2, 1, 0, 70],
          [2, 2, 0, 80],
          [2, 3, 0, 90],
          [2, 4, 0, 60],
          [3, 0, 0, 70],
          [3, 1, 0, 80],
          [3, 2, 0, 90],
          [3, 3, 0, 50],
          [3, 4, 0, 70],
          [4, 0, 0, 80],
          [4, 1, 0, 90],
          [4, 2, 0, 60],
          [4, 3, 0, 70],
          [4, 4, 0, 80]
        ],
        shading: 'lambert',
        label: {
          textStyle: {
            fontSize: 16,
            borderWidth: 1
          }
        },
        itemStyle: {
          opacity: 0.8
        }
      }]
    });
  </script>
</body>

</html>

<!-- <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 3D Pyramid Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    <script>
        var chart = echarts.init(document.getElementById('chart'));

        chart.setOption({
            tooltip: {},
            visualMap: {
                max: 100,
                inRange: {
                    color: ['#e0ffff', '#006edd']
                }
            },
            xAxis3D: {
                type: 'category',
                data: ['A', 'B', 'C', 'D', 'E']
            },
            yAxis3D: {
                type: 'category',
                data: ['1', '2', '3', '4', '5']
            },
            zAxis3D: {
                type: 'value'
            },
            grid3D: {
                boxWidth: 200,
                boxDepth: 80,
                viewControl: {
                    // projection: 'orthographic'
                },
                light: {
                    main: {
                        intensity: 1.2,
                        shadow: true
                    },
                    ambient: {
                        intensity: 0.3
                    }
                }
            },
            series: [{
                type: 'bar3D',
                data: [
                    [0, 0, 0, 60],
                    [0, 1, 0, 80],
                    [0, 2, 0, 90],
                    [0, 3, 0, 70],
                    [0, 4, 0, 50],
                    [1, 0, 0, 40],
                    [1, 1, 0, 60],
                    [1, 2, 0, 70],
                    [1, 3, 0, 80],
                    [1, 4, 0, 90],
                    [2, 0, 0, 50],
                    [2, 1, 0, 70],
                    [2, 2, 0, 80],
                    [2, 3, 0, 90],
                    [2, 4, 0, 60],
                    [3, 0, 0, 70],
                    [3, 1, 0, 80],
                    [3, 2, 0, 90],
                    [3, 3, 0, 50],
                    [3, 4, 0, 70],
                    [4, 0, 0, 80],
                    [4, 1, 0, 90],
                    [4, 2, 0, 60],
                    [4, 3, 0, 70],
                    [4, 4, 0, 80]
                ],
                shading: 'lambert',
                label: {
                    textStyle: {
                        fontSize: 16,
                        borderWidth: 1
                    }
                },
                itemStyle: {
                    opacity: 0.8
                }
            }]
        });
    </script>
</body>
</html> -->